<template>
	<view class="warp">
		<!-- #ifdef APP-PLUS -->
		<status-bar class="nav"/>
		<!-- #endif -->
		<!-- <view class="navi">top</view> -->
		<!-- banner -->
<!-- 		<unicloud-db ref="bannerdb" v-slot:default="{data, loading, error, options}" collection="opendb-banner"
			field="_id,bannerfile,open_url,title" @load="onqueryload"> -->
			<unicloud-db ref='udb' v-slot:default="{data,pagination,hasMore, loading, error, options}" @error="onqueryerror"
				:where="where" collection="movie" :page-size="10" 
				field="imgSrc,title,info,score,order,quote,_id">
			<!-- 当无banner数据时显示占位图 -->
			<!-- <image v-if="!(loading||data.length)" class="banner-image" src="/static/grid/empty.png" mode="aspectFill" :draggable="false" /> -->
		<!-- 	<uni-swiper-dot v-else class="uni-swiper-dot-box" @clickItem="clickItem" :info="data" 
				:current="current" field="content" > -->
				<!-- <swiper class="swiper-box" @change="changeSwiper" :current="swiperDotIndex" autoplay="true"  > -->
					<!-- <swiper-item> -->
						<view class="swiper-item" @click="clickBannerItem(item)">
							<image class="banner-image" src='https://vkceyugu.cdn.bspapp.com/VKCEYUGU-28f0a76b-e08f-48b9-a1f8-b3756640cf90/0bd4613a-c275-488c-873b-278a08445a02.png' mode="aspectFill" :draggable="false"/>
						</view>
					<!-- </swiper-item> -->
				<!-- </swiper> -->
			<!-- </uni-swiper-dot> -->
			
			<!-- 分类功能 -->
			<!-- <view class="">
				<button type="default" @click="select" v-model="keyword">分类</button>
			</view> -->
			<!-- 搜索框 -->
			<view>
				<uni-search-bar @click="select" class="uni-search-box" v-model="keyword" ref="searchBar" radius="100"
					 disabled placeholder="分类搜索" cancelButton="none"/>
				<view class="cover-search-bar" @click="select"></view>
			</view>
			<!-- 滑动栏 -->
		<!-- 	<view style="height: 440rpx;" v-for="(item,index) in data" :key="item.title"> 
								<scroll-view  scroll-x="true" 
								@scroll="scroll"  
								style="width: 100%;overflow:hidden;white-space:nowrap;">
									<view class="scroll-view_H">
										<view v-for="item in data" class="example-body">
											<image :src="item.bannerfile.url" mode="aspectFill" class="image"></image><br/>
											<text>{{item.title}}</text>
										</view>
									</view>
								</scroll-view>
							</view> -->
		<!-- </unicloud-db> -->
<!-- 		<unicloud-db ref='udb' v-slot:default="{data,pagination,hasMore, loading, error, options}" @error="onqueryerror"
			:where="where" collection="movie" :page-size="10"
			field="imgSrc,title,info,score,order"> -->
			<!-- 基于 uni-list 的页面布局 -->
			<uni-list class="uni-list" :border="false" :bounce="true" :alwaysScrollableVertical="true"
				:style="{height:listHight}">
				<uni-list-item :to="'/pages/grid/detail/detail?id='+item._id+'&title='+item.title" v-for="(item,index) in data"
					:key="index">
					<!-- 通过header插槽定义列表左侧图片 -->
					<template v-slot:header>
							<image class="avatar" :src="item.imgSrc" mode="aspectFill"></image>
					</template>
					
					<!-- 通过body插槽定义布局 -->
					<template v-slot:body>
						<view class="main"> 
							<text class="order">{{item.order}}.</text>
							<text class="title"> &nbsp;&nbsp;&nbsp; {{item.title}}</text><br><br><br><br><br><br>
							<uni-rate :value="item.score/2" :touchable="false" :size="14" readonly="true" activeColor="#FFAC2D" allowHalf="true"/>
							<span class="rate">{{item.score}}</span>
							<view class="info">
								<text>{{item.info[0]}}</text>
								<text>{{item.info[1]}} </text>		
							</view>
							<text>\n</text>
							<text style="top: 90%;font-size: small;">“ {{item.quote}} ”</text>
						</view>						
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:body>	
					
						<uni-load-more :status="status" @networkResume="refresh" contentText="contentdown"></uni-load-more>						
						<!-- <uni-load-state  :state="{data,pagination,hasMore, loading, error}"> -->
						<view style="padding: 35px;"></view>
						</uni-load-state>
					</template>
				</uni-list-item>
			</uni-list>
		</unicloud-db>
	</view>
</template>

<script>
	import {
		mapGetters,
	} from 'vuex';
	import statusBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar";
	export default {
		components: {
			statusBar
		},
		data() {
			return {
				keyword:"",
				status :'more',
				gtn: 10,
				ltn: 21,
				where: "",
				gridList: [],
				current: 0,
				swiperDotIndex: 0,
			}
		},
		computed: {
			...mapGetters({
				hasLogin: 'user/hasLogin'
			}),
		},
		// 注意将函数变为async类型的，允许使用await
		// 实现下拉刷新
		async onReady() {
			cdbRef = this.$refs.udb
		},
		async onReachBottom() {
			const db = uniCloud.database();
			const dbCmd = db.command
			const mdb = db.collection('movie')
			
      if(this.$refs.udb.hasMore){  //如果还有更多数据
				this.status = 'loading'
				let res = await mdb.where({"order":dbCmd.gt(this.gtn).and(dbCmd.lt(this.ltn))}).get()
				//如果不使用await则查询返回一个Promise对象，不好处理，await的如果是一个Promise，则直接获得Promise中的结果而不是对象本身。
					let newData = res.result.data
					this.$refs.udb.dataList.push(...newData) //通过给udb对象中的数据列表dataList添加新的数，就可以实现下拉时加载			
					this.gtn = this.gtn + 10
					this.ltn = this.ltn + 10
			}else{
				this.status = 'noMore'
			}
		},
		// onReachBottom() {
		// 	cdbRef.loadMore({
		// 		clear: true
		// 	})
		// },
		onLoad() {
			let gridList = []
			for (var i = 0; i < 3; i++) {
				gridList.push( this.$t('grid.visibleToAll') )
			}
			for (var i = 0; i < 3; i++) {
				gridList.push( this.$t('grid.invisibleToTourists') )
			}
			for (var i = 0; i < 3; i++) {
				gridList.push( this.$t('grid.adminVisible') )
			}
			this.gridList = gridList
		},
		watch: {
			keyword(keyword, oldValue) {
				let where = ''
				if (keyword) {
					// this.where = where + `& /${keyword}/.test(title)`;
					this.where = `/${keyword}/.test(type)`
				} else {
					this.where = where;
				}
			}
		},
		methods: {
			change(e) {
				uni.showToast({
					title:this.$t('grid.clickTip') + " " + `${e.detail.index}` + " " + this.$t('grid.clickTipGrid'),
					icon: 'none'
				})
			},
			/**
			 * banner加载后触发的回调
			 */
			onqueryload(data) {
			},
			changeSwiper(e) {
				this.current = e.detail.current
			},
			clickItem(e) {
				uni.showA
				this.swiperDotIndex = e
			},
			/**
			 * 点击banner的处理
			 */
			clickBannerItem(item) {
				// 有外部链接-跳转url
				if (item.open_url) {
					uni.navigateTo({
						url: '/pages/common/webview/webview?url=' + item.open_url + '&title=' + item.title,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
				// 其余业务处理
			},
			
			select(){
				uni.hideKeyboard();
				uni.navigateTo({
					url: './search/search',
					// animationType: 'fade-in',
					animationType:'slide-in-top'
				});
				
			}
		}
	}
</script>

<style>
	/* #ifndef APP-NVUE */
	text {
		font: Arial, Helvetica, sans-serif;
	}
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}
	view {
		font-size: 14px;
		line-height: inherit;
	}
	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14px;
		background-color: #ffffff;
	}
	/* #endif */

	/* #ifdef APP-NVUE */
	.warp {
		background-color: #fff;
	}
	/* #endif */

	.example-body {
		flex-direction: column;
		padding: 15px;
		background-color: #ffffff;
	}

	.image {
		width: 97px;
		height: 139px;
		margin-right: 5rpx;
	}

	.text {
		text-align: center;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
	}

	.banner-image {
		width: 750rpx;
		height: 400rpx;
	}

	.swiper-box {
		height: 400rpx;
	}

	.search-icons {
		padding: 16rpx;
	}

	.search-container-bar {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		align-items: center;
		position: fixed;
		left: 0;
		right: 0;
		z-index: 10;
		background-color: #fff;
	}

	/* #ifndef APP-NVUE || VUE3*/
	/deep/
	/* #endif */
	.uni-searchbar__box {
		border-width: 0;
	}

	/* #ifndef APP-NVUE || VUE3 */
	/deep/
	/* #endif */
	.uni-input-placeholder {
		font-size: 28rpx;
	}
	
	.scroll {
		white-space: nowrap;
		-webkit-scrollbar: false;
	}
		
	.scroll-view_H {
	height: 100%;
	width: 200%;
	display: flex;
	flex-wrap: nowrap;
	}
	
	.membershipLevel_item{
		background-color: red;
	}
	
	.rate{
		color: #FFAC2D;
	}
	
	.avatar {
	/* 	width: 300px;
		height: 200px;
		margin-right: 8rpx;
		text-shadow: #000000; */
		width: 200px;
		height: 155px;
		margin-right: 10rpx;
		/* border-radius: 5px; */
	}
	
	.order {
		width: 450rpx;
		font-size: 17px;	
	}
	
	.title {
		width: 400rpx;
		font-size: 15px;
		padding-left: inherit;
	}
</style>
